<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/base/jsp/taglibs.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title></title>
	
	
	<%@ include file="/base/jsp/jscss.jsp"%>
	
	
	<script type="text/javascript">
	
	var buttons = '';
    function initToolBar () {
    	buttons = getLinkButtons(names);
    }
	var linkButtons = new Array();
	
	linkButtons["add"] = {iconAlign:'left',text: 'add',iconCls: 'icon-add',handler: function () {alert(2);},plain:true};
	linkButtons["edit"] = {text: 'edit',iconCls: 'icon-edit',handler: function () {editfun();},plain:true};
	linkButtons["remove"] = {text: 'remove',iconCls: 'icon-remove',handler: function () {removefun();},plain:true};
	linkButtons["refresh"] = {text: 'refresh',iconCls: 'icon-refresh',handler: function () {removefun();}};
	
	var names = ['add','edit','remove'];
	
	var initButtons = [{id:'add',handler:function add2(){},text:'添加'}];
	
	
	function getLinkButtons (names) {
		var result = new Array();
		for (var i=0;i<names.length;i++) {
			result[i]=linkButtons[names[i]];
		}
		return result;
	}
	
	function settingButton (buttons) {
		
		for (var i in initButtons) {
			
			var b = buttons[i];
			var target_button = linkButtons[buttons[i].id];
			for (var j in b) {
				alert(b[j]);
				target_button[j] = b[j];
			}
		}
	}

	function createMyToolBar() {
		var bs = getLinkButtons(names);
		var result = new Array();
		for (var i in bs) {
			
			var id = 'b_'+bs[i].id;
			
			$('#toolbarCty').html($('#toolbarCty').html()+'<a id="'+id+'"></a>');
			bs[i].id = id;
			result[i] = bs[i];
		}
		$.each (result,function (i){
			
			$('#'+result[i].id).linkbutton(linkButtons[names[i]]);
			$('#'+result[i].id).click(eval(result[i].handler));
		});
	}
	
	function testCCC () {
		
		$.each ($("#ccc a"),function (i){
			
			$(this).linkbutton(linkButtons[names[i]]);
			$(this).click(function () {
	 	        alert("我被点到了！"+i);
		 	});
		}); 
	}
	
	$(function () {
		testCCC();
		settingButton(initButtons);
		initToolBar();
		
		$('#tt').datagrid({  
 		    url:'${ctx }/base/plugin/easyui/demo/datagrid_data1.json', 
		    title:'list',
		    pagination:true,
		    rownumbers:true,
		    singleSelect:true,
		    pageNumber:3,
		    pageSize:5,
		    toolbar:buttons,
		    
		    columns:[[  
		                {field:'itemid',title:'itemid',width:100},  
		                {field:'productid',title:'productid',width:100},  
		                {field:'listprice',title:'listprice',width:100,align:'right'},
		                {field:'unitcost',title:'unitcost',width:100},
		                {field:'attr1',title:'attr1',width:100},
		                {field:'status',title:'status',width:100},
		            ]],
		});
		//--------------------------------------------------------------------------
		$('#centert').panel({
		
			title : 'formTest',
			iconCls : 'icon-remove',
			collapsible : true,
			minimizable : true,
			maximizable : true,
// 				closable : true,
// 				collapsed : true,
// 				minimized : true,
// 				maximized : true,
// 				closed : true,

		});

		/* 		$('#toolbarCty').toolbar({
		
		 tools:buttons
		 });
		 */
		createMyToolBar();
	});

		function addfun() {
			alert("addfun");
		}
		function editfun() {
			alert("editfun");
		}
		function removefun() {
			alert("removefun");
		}
	</script>
	
</head>
<body>

<div>
<h3>listGird 数据的工具栏</h3>
<hr/>
<h5>简单的</h5>
<div>

    <h2>DataGrid Complex Toolbar</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>The DataGrid toolbar can be defined from a &lt;div/&gt; markup, so you can define the layout of toolbar easily.</div>
    </div>
    <div style="margin:10px 0;"></div>
    
    
<hr/>
<div id='ccc'>
<a ></a>
<a ></a>
<a ></a>

</div>




form
<div id='centert'>
	<div id="toolbarCty" class="datagrid-toolbar"></div>
	<form id="ff" method="post">
		<table>
			<tr>
				<td>Name:</td>
				<td><input class="easyui-validatebox" type="text"
					name="name" data-options="required:true"></input></td>
			</tr>
			<tr>
				<td>Email:</td>
				<td><input class="easyui-validatebox" type="text"
					name="email" data-options="required:true,validType:'email'"></input></td>
			</tr>
			<tr>
				<td>Subject:</td>
				<td><input class="easyui-validatebox" type="text"
					name="subject" data-options="required:true"></input></td>
			</tr>
			<tr>
				<td>Message:</td>
				<td><textarea name="message" style="height: 60px;"></textarea></td>
			</tr>
			<tr>
				<td>Language:</td>
				<td><select class="easyui-combobox" name="language"><option
							value="ar">Arabic</option>
						<option value="bg">Bulgarian</option>
						<option value="ca">Catalan</option>
						<option value="zh-cht">Chinese Traditional</option>
						<option value="cs">Czech</option>
						<option value="da">Danish</option>
						<option value="nl">Dutch</option>
						<option value="en" selected="selected">English</option>
						<option value="et">Estonian</option>
						<option value="fi">Finnish</option>
						<option value="fr">French</option>
						<option value="de">German</option>
						<option value="el">Greek</option>
						<option value="ht">Haitian Creole</option>
						<option value="he">Hebrew</option>
						<option value="hi">Hindi</option>
						<option value="mww">Hmong Daw</option>
						<option value="hu">Hungarian</option>
						<option value="id">Indonesian</option>
						<option value="it">Italian</option>
						<option value="ja">Japanese</option>
						<option value="ko">Korean</option>
						<option value="lv">Latvian</option>
						<option value="lt">Lithuanian</option>
						<option value="no">Norwegian</option>
						<option value="fa">Persian</option>
						<option value="pl">Polish</option>
						<option value="pt">Portuguese</option>
						<option value="ro">Romanian</option>
						<option value="ru">Russian</option>
						<option value="sk">Slovak</option>
						<option value="sl">Slovenian</option>
						<option value="es">Spanish</option>
						<option value="sv">Swedish</option>
						<option value="th">Thai</option>
						<option value="tr">Turkish</option>
						<option value="uk">Ukrainian</option>
						<option value="vi">Vietnamese</option></select></td>
			</tr>
		</table>
	</form>
</div>

			<hr/> 
    <table class="easyui-datagrid" title="DataGrid Complex Toolbar" style="width:700px;height:250px"
            data-options="rownumbers:true,singleSelect:true,toolbar:'#tb'">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:80">Item ID</th>
                <th data-options="field:'productid',width:100">Product</th>
                <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
                <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                <th data-options="field:'attr1',width:240">Attribute</th>
                <th data-options="field:'status',width:60,align:'center'">Status</th>
            </tr>
        </thead>
    </table>
    <div id="tb" style="padding:5px;height:auto">
        <div>
            Date From: <input class="easyui-datebox" style="width:80px">
            To: <input class="easyui-datebox" style="width:80px">
            Language: 
            <select class="easyui-combobox" panelHeight="auto" style="width:100px">
                <option value="java">Java</option>
                <option value="c">C</option>
                <option value="basic">Basic</option>
                <option value="perl">Perl</option>
                <option value="python">Python</option>
            </select>
            <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
        </div>
        <div id="toolBar1" style="margin-bottom:5px;">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true">add</a>
        </div>
        
    </div>

<hr/>
  <table id="tt"></table>
<hr/>


</div>

</div>

</body>
</html>